<template>
  <div class='header'>
    <div class='back'><img src="../assets/images/hyll-5.png" v-if="shareFlag" alt="" @click="But"></div>
    <div class="title">{{title}}</div>
    <div class="empty">
      <div class="music-box" >
        <audio class="media-audio" @ended="ended" src="https://i.gt.cn/cardimage/music1.mp3" preload="auto" type="audio/mpeg" ref="MusicPlay">
          <!-- <source
                 >您的浏览器不支持 audio 元素。 -->
        </audio>
        <img v-show="!musicTF" src="../assets/images/bill2022/home/musicOpen.png" :class="!musicTF ? 'musicLogo h5_component_name_music' : 'musicLogo'" @click="musicPause" />
        <img v-show="musicTF" src="../assets/images/bill2022/home/musicClose.png" class="musicLogo" @click="musicPlay" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'headerBox',
  props: {
    shareFlag: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: '',
    },
   
  },
  data () {
    return {
      imgUrl: '',
      musicTF: true, //是否显示禁止播放
    }
  },
  mounted () {
    this.$refs.MusicPlay.src = "https://i.gt.cn/cardimage/music1.mp3"
    this.$refs.MusicPlay.load() // 音频预加载
    // console.log('this.$refs.MusicPlay', this.$refs.MusicPlay)
    document.addEventListener('visibilitychange', () => {
      if (document.hidden) {
        // 页面被挂起
        this.musicPause()
        // console.log('切换到后台了')
      } else {
        // 页面呼出
        if (!this.musicTF) {
          this.musicPlay()
        }
        // console.log('切换到前台了')
      }
    })
  },
  methods: {
    musicPause () {
      this.musicTF = true
    },
    changeMusic (val) {
    //   console.log(val)
      this.musicPause()
    },
    /**
    * 播放音乐并开始旋转
    */
    musicPlay () {
      this.$refs.MusicPlay.play()
      this.musicTF = false
      this.countMusicNum()
    },
    musicPause () {
      this.$refs.MusicPlay.pause()
      this.musicTF = true
      //   if (this.interval !== null) {
      //     clearInterval(this.interval) //停止定时器
      //   }
    },
    /**
  * 设置定时器旋转，这个是放在mouted方法中，需要页面一加载就旋转
  */
    countMusicNum () {
      let that = this
      that.interval = setInterval(function () {
        that.musicNum = that.musicNum + 10
        that.musicRotate = 'rotate(' + that.musicNum + 'deg)'
      }, 100)
    },
    ended () {
      this.$refs.MusicPlay.load()
      this.$refs.MusicPlay.play()
    },
    But () {
      this.$emit('changeMusic', '关闭音乐')
      MXWebui.closeWindow()
    },
   
  },
}
</script>
<style lang="less" scoped>
.header {
  width: 100vw;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  position: fixed;
    top: 0rem;
    z-index: 99999;
  .back {
    width: 7.375rem;
    z-index: 99999;
    img {
      width: 3rem;
      height: 3rem;
      vertical-align: super;
      margin-top: 0.45rem;
    }
  }
  .empty {
    width: 5rem;
    margin-top: -1.5rem;
    z-index: 99999;
    .music-box {
      width: 2.9375rem;
    
      z-index: 99999;
      display: flex;
      align-items: center;

    }
    .musicLogo {
      animation: none;
    }
    @keyframes music {
      0% {
        transform: rotate(0deg);
      }

      10% {
        transform: rotate(36deg);
      }

      20% {
        transform: rotate(72deg);
      }
      30% {
        transform: rotate(108deg);
      }
      40% {
        transform: rotate(144deg);
      }
      50% {
        transform: rotate(180deg);
      }
      60% {
        transform: rotate(216deg);
      }
      70% {
        transform: rotate(252deg);
      }
      80% {
        transform: rotate(288deg);
      }
      90% {
        transform: rotate(324deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
    .h5_component_name_music {
      /* top: 30px !important; */
      animation: music 1s infinite;
      transform-origin: 50% 50%;
      /* animation:music 2s infinite; */
      /* -webkit-animation:music 2s infinite; */
    }
  }
  .title {
    color: #fff;
    font-size: 2.4rem;
    font-weight: 500;
    margin-top: -2rem;
    // line-height: 2.75rem;
  }
}

.ios-header {
  padding-top: 1.75rem;
}
.shareVis {
  position: absolute;
  top: -150% !important;
  left: -150% !important;
}
.rule {
  max-width: 2.75rem;
  max-height: 2.75rem;
  vertical-align: top;
  // position: absolute;
  // right: ;
}
.hjbj {
  width: 7.375rem;
  height: 6rem;
  margin-top: -3rem;
}
</style>
